import { View, Text } from 'react-native'
import React from 'react'
//导入项目中的“页面/屏幕”对象
import AdminLogin from './screens/AdminLogin'
import MainMenu from './screens/MainMenu'
import ProductList from './screens/ProductList'
import ProductDetails from './screens/ProductDetails'
//导入ReactNavigation提供的路由导航相关对象
import { NavigationContainer } from '@react-navigation/native'  //导航容器
import { createNativeStackNavigator } from '@react-navigation/native-stack' //创建栈式导航器的方法

//使用栈式导航器创建出“导航器(即路由词典)”和“屏幕(即路由)”对象
const {Navigator, Screen} = createNativeStackNavigator()

export default function App() {
  return (
    <NavigationContainer>{/*路由器*/}
      <Navigator initialRouteName='plist'>{/*路由词典*/}
        <Screen 
          name='plist' 
          component={ProductList}
          options={{
            title: '商品列表',
            headerStyle: {backgroundColor:'#0aa1ed'},
            headerTintColor: '#fff',
            headerTitleStyle: {fontWeight:'bold'}
          }}/>{/*路由*/}
        <Screen 
          name='menu' 
          component={MainMenu}
          options={{
            title: '主菜单',
            headerStyle: {backgroundColor: '#0aa1ed'},
            headerTintColor: '#fff',
            headerTitleStyle: {fontWeight: 'bold'}
          }}/>{/*路由*/}
        <Screen 
          name='login' 
          component={AdminLogin}  
          options={{
            title: '管理员登录',
            headerStyle: { backgroundColor: '#0aa1ed' },
            headerTintColor: '#fff',     //标题提示文字的颜色
            headerTitleStyle: {fontWeight: 'bold'},   //标题文字家族、粗细、大小
          }} />{/*路由*/}
        <Screen 
          name='pdetails' 
          component={ProductDetails}
          options={{
            headerStyle:{backgroundColor:'#0aa1ed'},
            headerTintColor: '#fff',
            headerTitleStyle: {fontWeight:'bold'}
          }}/>{/*路由*/}
      </Navigator>
    </NavigationContainer>
  )
}